<template>
    <view class="order-filling">
        <view class="header">
            <view class="top">
                <image src="@/static/images/name.png" mode="" />
                <view class="name">中国联合航空KN5869</view>
            </view>
            <view class="info">
                <view class="info-l">
                    <view class="date">2024-11-20</view>
                    <view class="time">23:10</view>
                    <view class="city">成都 天府 T2</view>
                </view>
                <view class="info-c">
                    <image src="@/static/images/aircraft.png" mode="" />
                    <view class="hours">共2小时56分钟</view>
                </view>
                <view class="info-l">
                    <view class="date">2024-11-20</view>
                    <view class="time">23:10</view>
                    <view class="city">成都 天府 T2</view>
                </view>
            </view>
            <view class="tips">
                <image src="@/static/images/info.png" mode="" />
                <view class="name">¥440/成人 不支持儿童 不支持婴儿</view>
            </view>
        </view>
        <view class="content">
            <view class="top">
                <up-form labelPosition="left" :model="modelFrom" :labelStyle="labelStyle" labelWidth="78">
                    <up-form-item label="乘机人：" prop="userInfo.sex">
                        <up-input v-model="modelFrom.sex" disabled disabledColor="#ffffff" placeholder="请选择乘机人"
                            border="none"></up-input>
                        <template #right>
                            <up-icon name="arrow-right"></up-icon>
                        </template>
                    </up-form-item>
                    <up-form-item label="联系人：" prop="userInfo.sex">
                        <up-input v-model="modelFrom.sex" placeholder="请输入联系人" border="none"></up-input>
                    </up-form-item>
                    <up-form-item label="手机号：" prop="userInfo.phone">
                        <up-input v-model="modelFrom.phone" placeholder="请输入手机号" border="none"></up-input>
                    </up-form-item>
                </up-form>
            </view>
            <view class="voucher">
                <view class="voucher-l">
                    <view class="title">
                        报销凭证
                    </view>
                    <view class="tips-b">
                        报销凭证由平台提供，将在客人乘坐航班后寄出
                    </view>
                </view>
                <up-switch size="22" v-model="value" inactiveColor="#EFEFEF"></up-switch>
            </view>
            <view class="guarantee">
                <view class="guarantee-t">
                    <image class="cxbz" src="@/static/images/cxbz.png" mode="" />
                    <view class="more">
                        <view>查看更多</view>
                        <image src="@/static/images/inco.png" mode="" />
                    </view>
                </view>
                <view class="guarantee-c">
                    <view class="title">航空延迟险</view>
                    <view class="access">
                        <up-checkbox :customStyle="{ marginRight: '8px' }" name="agree" usedAlone label="¥40/人"
                            v-model:checked="aloneChecked">
                        </up-checkbox>
                    </view>
                </view>
                <view class="guarantee-b">
                    <view class="item">
                        <image src="@/static/images/icon-t.png" mode="" />
                        <view>
                            最高赔偿<text>50万</text>
                        </view>
                    </view>
                    <view class="item">
                        <image src="@/static/images/icon-t.png" mode="" />
                        <view>
                            特定疾病赔<text>50万</text>
                        </view>
                    </view>
                    <view class="item">
                        <image src="@/static/images/icon-t.png" mode="" />
                        <view>
                            人身意外赔<text>50万</text>
                        </view>
                    </view>
                </view>

            </view>
            <view class="read">
                <view class="read-title">点击“提交订单”表示已阅读并同意</view>
                <view class="read-p">
                    关于民航乘客携带锂电池及危险品乘机限制，机票预订须知，祥鹏航空运输总条逾重行李收费标准，保山、腾冲，件,特殊旅客承运标准，祥鹏航空国内航班乘客告知书，芒市一体化运行告知书，关于文明乘机的提醒。
                </view>
            </view>

        </view>
        <view class="footer">
            <view class="footer-l">
                <text>实付 </text> <text>¥ </text> <text>50.00 </text>
            </view>
            <view class="footer-r">
                <view class="details">
                    <text>明细 </text>
                    <image src="@/static/images/aw-t.png" mode="" />
                </view>
                <view class="btn" @click="onClick">提交订单</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const labelStyle = {
    fontWeight: 700,
    fontSize: "30rpx",
    color: "#000000",
}


const modelFrom = ref({
    name: '',
    sex: '',
    phone: '',
})

const value = ref(true)
const aloneChecked = ref(true)

const onClick = () => {
    uni.navigateTo({
        url: "/pages/order/order-details",
    });
};

</script>

<style scoped lang="scss">
.order-filling {
    height: 100vh;
    position: relative;

    .header {
        background: url("@/static/images/bg.png");
        background-size: 100% 100%;
        height: 800rpx;

        .top {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            color: #fff;
            padding-top: 50rpx;
            box-sizing: border-box;

            image {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }

        .info {
            margin: 20rpx 0;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .info-l {
                .date {
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #FFFFFF;
                }

                .time {
                    font-weight: bold;
                    font-size: 50rpx;
                    color: #FFFFFF;
                }

                .city {
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #FFFFFF;
                }
            }

            .info-c {
                image {
                    width: 194rpx;
                    height: 46rpx;
                }

                .hours {
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #FFFFFF;
                }
            }
        }

        .tips {
            margin: 30rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20rpx;
            background: rgba(0, 41, 118, 0.1);
            border-radius: 10rpx 10rpx 10rpx 10rpx;

            image {
                width: 28rpx;
                height: 28rpx;
                margin-right: 20rpx;
            }

            .name {
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                letter-spacing: 2rpx;
            }
        }
    }

    .content {
        position: absolute;
        top: 370rpx;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        background: #F5F6F8;
        border-radius: 30rpx 30rpx 0 0;
        padding-bottom: 180rpx;


        .top {
            background: #FFFFFF;
            border-radius: 30rpx 30rpx 0 0;
            box-sizing: border-box;
            padding: 30rpx;
            margin-bottom: 20rpx;

            .u-form {
                .u-form-item {
                    background: #F7F7F9;
                    border-radius: 10rpx 10rpx 10rpx 10rpx;
                    margin-bottom: 20rpx;
                    padding: 10rpx 40rpx;
                }

                &>:nth-child(3) {
                    margin-bottom: 0;

                }

                .u-input {
                    background-color: #F7F7F9 !important;
                }
            }

        }

        .voucher {
            padding: 30rpx;
            background: #FFFFFF;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;
            box-sizing: border-box;

            .voucher-l {
                .title {
                    font-weight: bold;
                    font-size: 30rpx;
                    color: #000000;
                    margin-bottom: 10rpx;
                }

                .tips-b {
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #49596D;
                }

            }
        }

        .guarantee {
            padding: 30rpx;
            background: #FFFFFF;
            align-items: center;
            margin-bottom: 20rpx;
            box-sizing: border-box;

            .guarantee-t {
                display: flex;
                justify-content: space-between;
                margin-bottom: 20rpx;

                .cxbz {
                    width: 176rpx;
                    height: 44rpx;
                }

                .more {
                    display: flex;
                    align-items: center;
                    font-size: 26rpx;
                    color: #49596D;

                    image {
                        width: 12rpx;
                        height: 16rpx;
                        margin-left: 10rpx;
                    }
                }
            }

            .guarantee-c {
                display: flex;
                justify-content: space-between;
                margin-bottom: 20rpx;

                .title {
                    font-weight: bold;
                    font-size: 32rpx;
                    color: #000000;
                }

                .access {
                    display: flex;
                    align-items: center;
                }
            }

            .guarantee-b {
                display: flex;
                align-items: center;

                .item {
                    display: flex;
                    align-items: center;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #8C94A1;
                    margin-right: 10rpx;


                    image {
                        width: 28rpx;
                        height: 28rpx;
                        margin-right: 10rpx;
                    }

                    text {
                        color: rgba(28, 113, 244, 1);
                    }

                }
            }

        }

        .read {
            padding: 30rpx;
            background: #FFFFFF;
            align-items: center;
            margin-bottom: 20rpx;
            box-sizing: border-box;

            .read-title {
                font-weight: bold;
                font-size: 30rpx;
                color: #101D34;
                margin-bottom: 20rpx;
            }

            .read-p {
                font-weight: 500;
                font-size: 28rpx;
                color: #49596D;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
                text-decoration-line: underline;
                text-transform: none;
            }
        }
    }

    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        padding: 50rpx 20rpx;
        box-sizing: border-box;
        box-shadow: 14rpx 0rpx 34rpx 0rpx #ccc;

        .footer-l {
            &>:nth-child(1) {
                font-weight: 500;
                font-size: 26rpx;
                color: #000000;
            }

            &>:nth-child(2) {
                font-weight: 400;
                font-size: 30rpx;
                color: #F94230;
            }

            &>:nth-child(3) {
                font-weight: bold;
                font-size: 36rpx;
                color: #F94230;
            }
        }

        .footer-r {
            display: flex;
            align-items: center;

            .details {
                font-weight: 500;
                font-size: 26rpx;
                color: #000000;
                margin-right: 20rpx;
                display: flex;
                align-items: center;

                image {
                    width: 22rpx;
                    height: 14rpx;
                    margin-left: 10rpx;
                }
            }

            .btn {
                background: #1C71F4;
                border-radius: 14rpx 14rpx 14rpx 14rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 500;
                font-size: 30rpx;
                color: #FFFFFF;
                width: 240rpx;
                height: 70rpx;
            }
        }

    }
}
</style>